<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>m3u8在线观看</title>
</head>

<body>
    <media-controller>
        <video id="video" slot="media" crossorigin>
        </video>
        <media-control-bar>
            <media-play-button></media-play-button>
            <media-time-display showduration></media-time-display>
            <media-time-range></media-time-range>
            <media-playback-rate-button></media-playback-rate-button>
            <media-mute-button></media-mute-button>
            <media-volume-range></media-volume-range>
            <media-fullscreen-button></media-fullscreen-button>
        </media-control-bar>
    </media-controller>
    <div>
        <input id="m3u8-src">
        <button id="start-cache">缓存</button>
        <button id="clear-cache">清除缓存</button>
        <h3 id="msg"></h3>
    </div>
    <div id="block-list">
    </div>

    <style>
        #block-list {
            display: flex;
            flex-wrap: wrap;
        }

        #block-list>div {
            display: block;
            width: 10px;
            height: 10px;
            background-color: red;
            margin: 1px;
        }
    </style>
</body>


</html>